<!--
@fucntion: 材料出移库清单信息
-->
<template>
<div class="module-basic-Materials">
  <el-row style="height:100%;">
    <el-col style="height:100%;">
      <table-panel 
      v-show="SwitchingPoint"
      :name="'材料出移库清单信息'" 
      :columns="MaterialsColumns" 
      :tableData="MaterialsData" 
      :showRowNumber="false" 
      :multiSelection="true"
      :inputLabelSearchMode="true"
      :canCreate="authorities.create" 
      :canDeleteAll="authorities.DeleteAll"
      :canEdit="authorities.edit" 
      :canDelete="authorities.delete"
      :canExport="authorities.export"
      :canImport="authorities.Import"
      :action="actionUrl"
      :importFields="importField"
      @table-upload="onUpload"
      :currentPage="MaterialsCurrentPage" 
      :totalNum="MaterialsTotalNum" 
      :canDownTemplate="authorities.DownTemplate"
      @page-change="onPageChange('Materials',$event)" 
      :pageSize="pageSize"
      @table-searching="onSearching('Materials',$event)"
      @table-create="onCreate('Materials',$event)" 
      @table-DeleteAll="onDeleteAll('Materials',$event)" 
      @table-edit="onEdit('Materials', $event)"
      @table-delete="onDelete('Materials',$event)" 
      @table-export="onExport('Materials',$event)"
      @table-downTemplate="canDownTemplate('Materials',$event)"
      @selection-change="onSelectionChange('Materials',$event)">
      </table-panel>
      <el-col v-show="!SwitchingPoint">
        <el-card style="background-color: #DCDFE6;"> 
          <span v-if="(Ddata)" style="font-weight:bold;">材料出移库清单信息添加</span>
          <span v-else style="font-weight:bold;">材料出移库清单信息修改</span>
          <el-button type="warning" plain size="mini" style="float:right" 
            @click="onConfirm('Materials')">
            <span v-if="(Ddata)" style="font-weight:bold;">确认添加</span>
            <span v-else style="font-weight:bold;">确认修改</span>
          </el-button> 
          <el-button v-if="(Ddata)" type="danger"  plain size="mini" style="float:right" 
            @click="DetailedData = {};">重置</el-button>
          <el-button plain size="mini" style="float:right" 
            @click="SwitchingPoint = !(SwitchingPoint);">返回
          </el-button> 
        </el-card>
        <el-form ref="DetailedData" 
        :model="DetailedData" 
        :rules="rules" 
        label-position="right" 
        label-width="105px" 
        size="mini" 
        status-icon>
        <el-card style="width: 100%;height:600px;">
          <el-card>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="所属部门" prop="BMMC">
                  <el-select v-model="DetailedData.BMMC" placeholder="请输入或查找选择部门" filterable clearable> 
                    <el-option
                      v-for="(item,index) in XLdata.data_BMMC"
                      :key="index"
                      :label="item.data"
                      :value="item.value">
                      <span style="float: left">{{ item.data }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="耗材名称" prop="medicalConsumableName">
                  <el-input  v-model="DetailedData.medicalConsumableName"></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="materialsOutboundNumber">
                  <el-input  
                  v-model="DetailedData.materialsOutboundNumber" 
                  @keyup.native="handleInput"
                  >
                    <template slot="append">{{DetailedData.unit}}</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="单位" prop="unit">
                  <el-input  v-model="DetailedData.unit"></el-input>
                </el-form-item>
                <el-form-item label="单价" prop="price">
                  <el-input  v-model="DetailedData.price"><template slot="append">￥</template></el-input>
                </el-form-item>
                <el-form-item label="总金额" prop="materialsOutboundSum">
                  <el-input  v-model="DetailedData.materialsOutboundSum"><template slot="append">￥</template></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="材料类别" prop="materialsOutboundType">
                  <el-select v-model="DetailedData.materialsOutboundType" placeholder="请输入或查找选择类别" filterable clearable>
                    <el-option
                      v-for="(item,index) in XLdata.data_materialsOutboundType"
                      :key="index"
                      :label="item.data"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="规格型号" prop="specifications">
                  <el-input  v-model="DetailedData.specifications"></el-input>
                </el-form-item>
                <el-form-item label="生产厂家" prop="productionPlace">
                  <el-input  v-model="DetailedData.productionPlace"></el-input>
                </el-form-item>
                <el-form-item label="收入项目" prop="entitlementSpending">
                  <el-input  v-model="DetailedData.entitlementSpending"></el-input>
                </el-form-item>
                <el-form-item label="供应商名称" prop="providerName">
                  <el-select v-model="DetailedData.providerName" placeholder="请输入或查找选择供应商" filterable clearable> 
                    <el-option
                      v-for="(item,index) in XLdata.data_providerName"
                      :key="index"
                      :label="item.data"
                      :value="item.value">
                      <span style="float: left">{{ item.data }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="物资类别" prop="suppliesCategory">
                  <el-select v-model="DetailedData.suppliesCategory" placeholder="请选择类别">
                    <el-option
                      v-for="(item,index) in XLdata.data_suppliesCategory"
                      :key="index"
                      :label="item.data"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出库移库" prop="outboundMove">
                  <el-select v-model="DetailedData.outboundMove" placeholder="请选择">
                    <el-option label="出库" value="出库"></el-option>
                    <el-option label="移库" value="移库"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="日期" prop="materialsOutboundDate">
                  <el-date-picker
                    v-model="DetailedData.materialsOutboundDate"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="备注" prop="notes">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 5}"
                    placeholder="请输入内容"
                    maxlength="50"
                    show-word-limit
                    v-model="DetailedData.notes">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>    
        </el-card>
        </el-form>
      </el-col>
    </el-col>
  </el-row>
</div>
</template>

<script>
import TablePanel from "@/components/basic/TablePanel";//一个简单的增删查改表格
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";//从表格列变换到表单的一些工具

//meta info
var Materials = "Materials"; // 表格名称
var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证
var curPageAttr = "CurrentPage";// 分页-当前页
var totalNumAttr = "TotalNum";// 分页-总数
var qParamAttr = "QueryParams";// 查询参数

// 采集器信息-列
var MaterialsColumns = [
  {
    prop: "materialsOutboundId",
    label: "编号",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "BMMC",
    label: "部门名称",
  },
  {
    prop: "materialsOutboundType",
    label: "材料类别",
  },
  {
    prop: "outboundMove",
    label: "出库移库",
    width:70,
  },
  {
    prop: "medicalConsumableId",
    label: "材料编码",
  },
  {
    prop: "materialsOutboundNumber",
    label: "数量",
    outOfSearch:true,
  },
  {
    prop: "materialsOutboundSum",
    label: "总金额",
    outOfSearch:true,
  },
  {
    prop: "materialsOutboundDate",
    label: "日期",
    type:"date",
  },
  {
    prop: "notes",
    label: "备注",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "medicalConsumableName",
    label: "耗材名称",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "specifications",
    label: "规格型号",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "productionPlace",
    label: "生产厂家",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "price",
    label: "单价",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "unit",
    label: "单位",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "entitlementSpending",
    label: "收入项目",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "providerId",
    label: "供应商编码",
    outOfSearch:true,
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "providerName",
    label: "供应商名称",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "suppliesCategory",
    label: "物资类别",
    outOfSearch:true,
    hidden: true,
  },
];

//导入
var importField = [
 "编号",
 "部门名称",
 "材料类别",
 "出库移库",
 "材料编码",
 "数量",
 "总金额",
 "日期",
  "备注",
 "耗材名称",
 "规格型号",
 "生产厂家",
 "单价",
 "单位",
 "收入项目",
 "供应商编码",
 "供应商名称",
 "物资类别",
];
//导出
var exportField = [
 "编号",
 "部门名称",
 "材料类别",
 "出库移库",
 "材料编码",
 "数量",
 "总金额",
 "日期",
  "备注",
 "耗材名称",
 "规格型号",
 "生产厂家",
 "单价",
 "单位",
 "收入项目",
 "供应商编码",
 "供应商名称",
 "物资类别",
];

export default {
  name: "Materials",
  components: {
    "table-panel": TablePanel,
  },
  methods: {
    onSearching: function(tname, params) {//查询
      var me = this;
      let url = "/static/data/Materials.json";// /jcJsxxb   /static/data/Materials.json

      if(url !== "") {
        me[tname+qParamAttr] = {};
        me[tname+qParamAttr] = params;
        if (params.isAccurate) {
          me[tname+qParamAttr] = params.paramPairs;
        } else {
          me[tname+qParamAttr].keywords = params.query;
        }
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data.results;
              // me[tname+totalNumAttr] = resp.data.data.length;

              me[tname+totalNumAttr] = resp.data.total;// 分页-总数
              this.pageSize = resp.data.limit;//每页数量
              me[tname+curPageAttr] = resp.data.offset;//起始页    results
            }
        });
      }
    },
    onCreate: function(tname) {// 新增
      var me = this;
      me[tname + dlgVisibleAttr] = true;
      me[tname + recordAttr] = formModelInitFromTable(me[tname + columnsAttr]);
      this.DetailedData = {};
      this.Ddata = true;
      this.SwitchingPoint = !(this.SwitchingPoint);
    },
    onEdit: function(tname, row) {// 编辑
      var me = this;
      me[tname + dlgVisibleAttr] = true;
      me[tname + recordAttr] = row;
      this.Ddata = false;
      this.SwitchingPoint = !(this.SwitchingPoint);
      this.DetailedData = row
    },
    onDelete: function(tname, row) {// 删除
      var me = this;
      me.$confirm("确定删除这条记录吗?", "提示", {
          type: "warning"
      }).then(() => {
          me.deleteRequest(`/api/Materials/${row.materialsOutboundId}`).then((resp)=>{
            if(resp.status == 200) {
              me.$message.success("删除成功!");
              me.onSearching(Materials,{});// 重新加载表格数据
            }else{
              me.$message.error('删除失败！');
            }
          });
      }).catch(() => {});
    },
    onDeleteAll:function(tname, row){//全部删除
      var me = this;
      me.$confirm("确定删除全部记录吗?", "提示", {
          type: "warning"
      }).then(() => {
          me.deleteRequest(`/api`).then((resp)=>{
            if(resp.status == 200) {
              me.$message.success("删除成功!");
              me.onSearching(Charges,{});// 重新加载表格数据
            }else{
              me.$message.error('删除失败！');
            }
          });
      }).catch(() => {});
    },
    onSelectionChange: function(tname, data) {// 选中改变
      var me = this;
      // 缓存记录，按照编号，查询对应的选中权限节点数组
      me[tname + selectionAttr] = data;
    },
    onExport: function(tableName, params) {// 导出
      var me = this;
      const h = me.$createElement;
      me.$notify.info({
        title: "提示",
        message: h("i", { style: "color: teal" }, "正在导出数据，请稍等……")
      });
      me.exportRequest("/sbxxgl/export", {
        fields: JSON.stringify(exportField),//exportField
        sfbf: false
      }).then(resp => {
        if (resp.status === 200) {
          me.$notify.success({
            title: "提示",
            message: h("i", { style: "color: #67C23A" }, "数据导出成功")
          });
          downExcel(resp);
        } else {
          me.$notify.success({
            title: "提示",
            message: h("i", { style: "color: #F56C6C" }, "数据导出失败")
          });
        }
      });
    },
    onUpload:function(msg,flag){//导入
      var me = this;
      if(flag){
        me.currentPage = 1;
        me.onSearching('sbxxgl',{page:me.currentPage,size:me.pageSize});
      }
    },
    onDownTemplate:function(tableName, params){//模板下载
      var me = this;
      const h = me.$createElement;
      me.$notify.info({
        title: '提示',
        message: h('i', { style: 'color: teal'}, '正在下载模板，请稍等……')
      });
      me.downFileRequest('/excelTemplate/材料出移库清单信息.xlsx').then(resp=>{
        me.$notify.success({
          title: '提示',
          message: h('i', { style: 'color: #67C23A'}, '模板下载成功')
        });
          fileDownload(resp.data,"材料出移库清单信息.xlsx");
      });
    },
    onPageChange:function(tname,page){// 分页改变
      var me = this;
      let url = "/jcJsxxb";// /jcJsxxb

      if(url !== ""){
        me[tname+curPageAttr] = page;
        me[tname+qParamAttr]["page"] = page;
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data.data;
              me[tname+totalNumAttr] = resp.data.data.length;
            }
        });
      }

    },
    onConfirm: function(tname) {// 对话框-确认
      let me = this;
      // 发送请求 /jcJsxxb

      if(me[Materials + recordAttr].materialsOutboundId == ""){

        me.$confirm("确定新增记录吗?", "提示", {
          type: "warning"
        }).then(() => {
          me.postRequest("/api/Materials",me[Materials + recordAttr]).then(resp => {
            if (resp.status == 200) {
              me.$message.success("提交成功！");

              //最后，隐藏对话框
              me[tname + dlgVisibleAttr] = false;
              this.SwitchingPoint = !(this.SwitchingPoint);
              me.onSearching(Materials, {});// 重新查一遍
            } else {
              me.$message.error("服务器发生错误，代码：" + resp.status);
            }
          });
        }).catch(() => {});
      }else{

        me.$confirm("确定修改记录吗?", "提示", {
          type: "warning"
        }).then(() => {
          me.postRequest("/api/VideoModify",me[Materials + recordAttr]).then(resp => {
            if (resp.status == 200) {
              me.$message.success("提交成功！");

              //最后，隐藏对话框
              me[tname + dlgVisibleAttr] = false;
              this.SwitchingPoint = !(this.SwitchingPoint);
              me.onSearching(Materials, {});// 重新查一遍
            } else {
              me.$message.error("服务器发生错误，代码：" + resp.status);
            }
          });
        }).catch(() => {});
      }
    },
    handleInput() {
      this.DetailedData.materials0utboundNumber = this.DetailedData.materialsOutboundNumber.replace(/[^\.\d]/g, '')
      this.DetailedData.materials0utboundNumber = this.DetailedData.materialsOutboundNumber.replace('.', '')
    }
  },
  data() {
    return {
      authorities:{
        create:true,
        DeleteAll:true,
        delete:true,
        edit:true,
        search:true,
        export:true,
        Import:true,
        DownTemplate:true,
      },// 权限控制
      [Materials + columnsAttr]: MaterialsColumns, // 表格-列
      [Materials + dataAttr]: [], // 表格的数据
      [Materials + selectionAttr]: [], // 当前选中
      [Materials + dlgVisibleAttr]: false, // 对话框是否可见
      [Materials + recordAttr]: {}, // 表单模型
      [Materials + rulesAttr]: {},// 表单验证
      [Materials + curPageAttr]:1,// 当前页
      [Materials + totalNumAttr]:0,// 总数
      [Materials + qParamAttr]:{},// 查询参数
      pageSize:20,// 每页数量

      importField:importField.join(","),//导入的字段

      SwitchingPoint:true,//表单列表之间-切换控制

      DetailedData:{},//存储表单中的数据

      Ddata:true,//控制表单头标题的显示内容

      actionUrl:"/sbxxgl/import",//导入的路径

      XLdata:{
      data_BMMC:{},//所属部门下拉
      data_materials_outbound_type:{},//材料类别下拉
      data_provider_name:{},//供应商名称下拉
      data_supplies_category:{},//物资类别下拉
      },

      rules: {
          BMMC: [
            { required: true, message: '请输入或查找选择部门', trigger: 'blur' },
           ],
          materialsOutboundType: [
            { required: true, message: '请输入或查找选择类别', trigger: 'blur' },
            ],
          outboundMove: [
            { required: true, message: '请选择', trigger: 'blur' },
          ],
          materialsOutboundNumber: [
            { required: true, message: '请输入数量', trigger: 'blur' },
           ],
          materialsOutboundSum: [
            { required: true, message: '请输入总金额', trigger: 'blur' },
            ],
          materialsOutboundDate: [
            { required: true, message: '请选择日期', trigger: 'blur' },
           ],
          notes: [
            { required: true, message: '请填写备注', trigger: 'blur' },
          ],
          medicalConsumableName: [
            { required: true, message: '请输入耗材名称', trigger: 'blur' },
            { min: 1, max: 50, message: '长度最大为50个字符', trigger: 'blur' }
            ],
          specifications: [
            { required: true, message: '请输入规格型号', trigger: 'blur' },
            { min: 1, max: 100, message: '长度最大为100个字符', trigger: 'blur' }
          ],
          productionPlace: [
            { required: true, message: '请输入生产厂家', trigger: 'blur' },
            { min: 1, max: 50, message: '长度最大为50个字符', trigger: 'blur' }
           ],
          price: [
            { required: true, message: '请输入单价', trigger: 'blur' },
            ],
          unit: [
            { required: true, message: '请输入单位', trigger: 'blur' },
            { min: 1, max: 5, message: '长度最大为5个字符', trigger: 'blur' }
           ],
          entitlementSpending: [
            { required: true, message: '请输入收入项目', trigger: 'blur' },
            { min: 1, max: 20, message: '长度最大为20个字符', trigger: 'blur' }
            ],
          providerName: [
            { required: true, message: '请选择', trigger: 'blur' },
          ],
          suppliesCategory: [
            { required: true, message: '请选择', trigger: 'blur' },
           ],
        }
    };
  },
  created: function() {
    var me = this;
    // 添加权限控制
    // me.authorities = me.$route.meta.authorities;

    // 表单模型初始化
    me[Materials + recordAttr] = formModelInitFromTable(me[Materials + columnsAttr]);
    // 表单验证初始化
    me[Materials + rulesAttr] = formRulesInitFromTable(me[Materials + columnsAttr]);
    //所属部门下拉初始化
    me.getRequest("/static/data/data_BMMC.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.XLdata.data_BMMC = resp.data.data;
      }
    });
    //材料类别下拉初始化
    me.getRequest("/static/data/data_BMMC.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.XLdata.data_materials_outbound_type = resp.data.data;
      }
    });
    //供应商名称下拉初始化
    me.getRequest("/static/data/data_BMMC.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.XLdata.data_provider_name = resp.data.data;
      }
    });
  //物资类别下拉初始化
    me.getRequest("/static/data/data_BMMC.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.XLdata.data_supplies_category = resp.data.data;
      }
    });
    me.onSearching(Materials, {});// 重新查一遍

  }
};
</script>

<style lang="scss">
.module-basic-Materials {
  height: 100%;
}
</style>